<template>
	<view class="apply">
		<view class="form">
			<u-form :model="form" ref="uForm" label-width="180">
				<u-form-item label="物品名称">
					<u-input type="text" v-model="form.thing_name" placeholder="请输入物品名称" />
				</u-form-item>
				<u-form-item label="物品描述">
					<u-input type="textarea" v-model="form.thing_describe" placeholder="请输入物品描述" />
				</u-form-item>
				<u-form-item label="上传物品图片" prop="photo">
					<u-upload width="160" height="160" :action="action" @on-remove="onRemove" @on-change="onChange"
						name='picture' :header="header">
					</u-upload>
				</u-form-item>
				<u-form-item label="上传鉴定图片" prop="photo">
					<u-upload width="160" height="160" :action="action" @on-remove="onRemoveCertificate"
						@on-change="onChangeCertificate" name='picture' :header="header">
					</u-upload>
				</u-form-item>
			</u-form>

			<view class="btn">
				<u-button type="primary" shape="circle" size="default" plain :ripple="true" @click="applyValuation">提交申请
				</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					user_id: '',
					thing_name: '',
					thing_images: '',
					thing_video: '',
					thing_describe: '',
					certificate: ''
				},
				action: 'https://dc.huan-sha.net/api/upload/picture',
				header: {
					Authorization: ""
				}, // 上传图片请求头
			};
		},
		methods: {
			// 提交
			applyValuation() {
				if (!this.form.thing_name || !this.form.thing_describe || !this.form.thing_images || !this.form
					.certificate) {
					return uni.showToast({
						title: '请将信息填写完整',
						icon: "none"
					})
				}
				this.$u.api.applyEvaluate(this.form).then(res => {
					uni.showToast({
						title: '操作成功',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1000)
				})
			},
			// 图片上传后，无论成功或者失败都会触发
			onChange(res, index, lists, name) {
				let arr = []
				lists.forEach(it => {
					arr.push(it.response.data.url)
				})
				this.form.thing_images = arr.toString()
			},
			onChangeCertificate(res, index, lists, name) {
				let arr = []
				lists.forEach(it => {
					arr.push(it.response.data.url)
				})
				this.form.certificate = arr.toString()
			},
			// 移除图片时触发
			onRemove(index, lists, name) {
				let arr = []
				lists.forEach(it => {
					arr.push(it.response.data.url)
				})
				this.form.thing_images = arr.toString()
			},
			onRemoveCertificate(index, lists, name) {
				let arr = []
				lists.forEach(it => {
					arr.push(it.response.data.url)
				})
				this.form.certificate = arr.toString()
			},
		},
		onShow() {
			this.header.Authorization = "Bearer " + this.vuex_token
			this.form.user_id = this.vuex_user.id
		}
	}
</script>

<style lang="scss" scope>
	.apply {
		.form {
			padding: 40rpx;

			.btn {
				margin-top: 100rpx;
			}
		}
	}
</style>
